import { UserOutlined } from "@ant-design/icons";
import { Outlet, Link } from "react-router-dom";
import { Layout, Menu, theme } from "antd";
import React,{ useState } from "react";
import MyContext from "@/utils/myContext.jsx";
import HeaderContent from "@/components/Header/index.jsx";
import Logo from "@/components/Logo/index.jsx";
const { Header, Content, Sider } = Layout;
const rootSubmenuKeys = ['tmp-1', 'tmp-2', 'tmp-3','tmp-4','tmp-5','tmp-6','tmp-7','tmp-8','tmp-9','tmp-10'];
const Home = () => {
  const store = React.useContext(MyContext);

  // 选中菜单
  // const [selectedKeys,setSelectedKeys] = useState(['Father1'])

  // 菜单项
  let items = store.userPower.map((list) => {
    if (list.path !== "") {
      return {
        key: list.key,
        label: <Link to={list.path}>{list.title}</Link>,
        icon: React.createElement(UserOutlined),
        element: list.path,
        children: list.children
          ? list.children.map((listChild) => {
              if (listChild.title) {
                return {
                  key: listChild.key,
                  label: <Link to={listChild.path}>{listChild.title}</Link>,
                  icon: React.createElement(UserOutlined),
                };
              }
            })
          : "",
      };
    } else {
      return {
        ey: list.key,
        label: <span>{list.title}</span>,
        icon: React.createElement(UserOutlined),
        element: list.path,
        children: list.children
          ? list.children.map((listChild) => {
              if (listChild.title) {
                return {
                  key: listChild.key,
                  label: <Link to={listChild.path}>{listChild.title}</Link>,
                  icon: React.createElement(UserOutlined),
                };
              }
            })
          : "",
      };
    }
  });
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const [openKeys, setOpenKeys] = useState(['']);
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };
  return (
    <Layout hasSider style={{height:'100%'}}>
      <Sider
        style={{
          overflow: "auto",
          height: "100%",
          position: "fixed",
          left: 0,
          top: 0,
          bottom: 0,
        }}
      >
        <div
          style={{
            height: 64,
            margin: 0,
            background: "rgba(45, 140, 240, 1)",
          }}
        >
          <Logo></Logo>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          items={items}
          defaultSelectedKeys={["Father1"]}
          openKeys={openKeys}
          onOpenChange={onOpenChange}
          // selectedKeys={selectedKeys}
          // onClick={clickMenu}
        />
      </Sider>
      <Layout
        className="site-layout"
        style={{
          marginLeft: 200,
          height:'100%'
        }}
      >
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <HeaderContent></HeaderContent>
        </Header>
        <Content
          style={{
            margin: "24px 16px 0",
            overflow: "initial",
            height:'100%',
            overflow:'auto'
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};
export default Home;
